<template>
    <div class="container">
        <div class="head-bar">
            <img v-if="fileSpace" :src="fileSpace + '/images/w-res-success-3.png'"
              alt="" class="width-375 height-133">            
            <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-success-2.png'"
                  alt="" class="width-182 height-182 res-icon">            
            <div class="tips-box">
              <div class="font-30 font-white">{{ msg }}</div>
            </div>
            <div class="height-100"></div>
            <div class="text-align-l res-content width-235">
              <div class="mar-b-10 font-13 font-color-9 flex">
                <span>收货时间：</span>
                <span class="font-color flex-item">{{ orderData.receivedTime }}</span>
              </div>
              <div class="mar-b-10 font-13 font-color-9 flex" v-if="orderData.appName">
                <span>温馨提示：</span>
                <span class="font-color flex-item">本次采购{{goodsNum}}件货品已铺货至您[{{orderData.appName}}]的商品管理中。</span>
              </div>
              <div class="font-13 check-detail flex mar-r--20 mar-t--5" v-if="orderData.appName">
                <span class="flex-item"> </span>
                <span class="pad-5" @click="checkDetail">查看详情</span>
              </div>
            </div>
        </div>
        <div class="height-17"></div>
        <div class="pad-l-20 pad-r-20 mar-l-20 mar-r-20">
          <div class="button-box">            
            <button class="details font-16 mar-b-16" @click="orderDetail">订单详情</button>
            <button class="home font-16" @click="$pt.reLaunch({url: '/pages/home/main'})">返回首页</button>
          </div>
        </div>
    </div>
</template>
<script>
    export default {
      data() {
        return {
          iconClass: '',
          price: '',
          msg: '',
          type: '',
          orderId: '',
          goodsNum: '',
          orderData: {}
        }
      },
      onShow() {
        this.price = this.getCurrentPage().query.price
        this.type = this.getCurrentPage().query.resType
        this.orderId = this.getCurrentPage().query.orderId
        this.goodsNum = this.getCurrentPage().query.goodsNum
        this.orderData.receivedTime = this.getCurrentPage().query.receivedTime
        this.orderData.appId = this.getCurrentPage().query.appId
        this.orderData.appName = this.getCurrentPage().query.appName
        console.log('收货成功appName:', typeof this.getCurrentPage().query.appName, 'data：', this.getCurrentPage().query.appName)
        this.$pt.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#fe6628'
        })
        this.msg = '确认收货成功'
      },
      methods: {
        checkDetail() {
          this.$pt.navigateToMiniProgram({
            appId: this.orderData.appId,
            path: 'pages/shop/management/main'
          })
        },
        orderDetail() {
          this.$pt.redirectTo({ url: '/pages/personal/order/detail/main?orderId=' + this.orderId })
        }
      }
    }
</script>
<style lang="less" scoped>
@color-green: #20b675;
.res-icon{
  position: absolute;
  left: 50%;
  top: 35px;
  width: 182px;
  height: 182px;
  margin: 0 0 0 -91px;
  z-index: 10;
}
.res-content{
  margin: 0 auto;
  line-height: 1.7;
}
.check-detail{
  color: #FF5742;
  text-decoration: underline;
}
.head-bar{
  position: relative;
  .tips-box{
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    text-align: center;
    z-index: 11;
  }
}
.button-box{
  button{
    width: 100%;
    height: 44px;
    color: #fff;
    background: linear-gradient(to right, #ff8e4b, #ff4e25);
    line-height: 44px;
    text-align: center;
    border-radius: 20em;
    &::after{
      border: unset;
    }
  }
  .home{
    color: #FE763B;
    border: #ff7d3d 1px solid;
    background: #fff;
  }
}
</style>
